<!DOCTYPE html>

<head>
  <title>波浪</title>
  <meta charset="utf-8" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .waveBox {
      width: 100%;
      height: 200px;
      position: relative;
      overflow: hidden;
    }

    .waveBox canvas {
      position: absolute;
      top: 0;
      left: 0;
    }

    #myCanvas1 {
      z-index: 1;
    }

    #myCanvas2 {
      z-index: 2;
    }
  </style>
</head>

<body>
  <div class="waveBox">
    <canvas id="myCanvas1" height="200">Your browser does not support the HTML5 canvas tag.</canvas>
    <canvas id="myCanvas2" height="200">Your browser does not support the HTML5 canvas tag.</canvas>
  </div>


  <script>
    function resize() {
      var canvas1 = document.getElementById('myCanvas1');
      canvas1.width = window.innerWidth;
      var canvas2 = document.getElementById('myCanvas2');
      canvas2.width = window.innerWidth;
    }
    window.onresize = function () {
      resize();
    }
    resize();
    ; (function () {

      wave1();
      wave2();

    })();
    /* 第一条 */
    function wave1() {
      var waveWidth = 3300,
        offset = 0,
        waveHeight = 15,  //波浪高度
        waveCount = 6,  //波浪个数
        startX = -1000,
        startY = 200,   //canvas 高度
        progress = 110,  //波浪位置的高度
        d2 = waveWidth / waveCount,
        d = d2 / 2,
        hd = d / 2,
        c = document.getElementById("myCanvas1"),
        ctx = c.getContext("2d");
      function tick() {
        offset -= 5;
        if (-1 * offset === d2) offset = 0;
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.fillStyle = '#95cef7';
        ctx.beginPath();
        var offsetY = startY - progress;
        ctx.moveTo(startX - offset, offsetY);
        for (var i = 0; i < waveCount; i++) {
          var dx = i * d2;
          var offsetX = dx + startX - offset;
          ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
          ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
        }
        ctx.lineTo(startX + waveWidth, 3000);
        ctx.lineTo(startX, 3000);
        ctx.fill();

        setTimeout(tick, 1500 / 60);    //速度
        //requestAnimationFrame(tick);
      }
      tick();
    }
    /* 第二条 */
    // function wave2() {
    //   var waveWidthB = 3300,
    //     offsetB = 0,
    //     waveHeightB = 30,  //波浪高度
    //     waveCountB = 4,  //波浪个数
    //     startXB = -1000,
    //     startYB = 200,   //canvas 高度
    //     progressB = 90,  //波浪位置的高度
    //     d2B = waveWidthB / waveCountB,
    //     dB = d2B / 2,
    //     hdB = dB / 2,
    //     cB = document.getElementById("myCanvas2"),
    //     ctxB = cB.getContext("2d");
    //   function tickB() {
    //     offsetB -= 5;
    //     if (-1 * offsetB === d2B) offsetB = 0;
    //     ctxB.clearRect(0, 0, cB.width, cB.height);
    //     ctxB.fillStyle = '#55a8e8';
    //     ctxB.beginPath();
    //     var offsetYB = startYB - progressB;
    //     ctxB.moveTo(startXB - offsetB, offsetYB);
    //     for (var i = 0; i < waveCountB; i++) {
    //       var dxB = i * d2B;
    //       var offsetXB = dxB + startXB - offsetB;
    //       ctxB.quadraticCurveTo(offsetXB + hdB, offsetYB + waveHeightB, offsetXB + dB, offsetYB);
    //       ctxB.quadraticCurveTo(offsetXB + hdB + dB, offsetYB - waveHeightB, offsetXB + d2B, offsetYB);
    //     }
    //     ctxB.lineTo(startXB + waveWidthB, 3000);
    //     ctxB.lineTo(startXB, 3000);
    //     ctxB.fill();

    //     setTimeout(tickB, 5000 / 60); //速度
    //     // requestAnimationFrame(tick);
    //   }
    //   tickB();
    // }

  </script>
</body>

</html>